<template>
  <div class="dataSource-view full-box d-flex p-l-mini p-b-mini">
    <div class="left-view flex-0 d-flex-c ">
      <div
        class="left-item full-width d-flex ai-c p-l-tiny  c-pointer"
        @click="show('datasourceStats')"
      >
        <img
          src="./images/sjy.jpg"
          class="left-img"
        >
        <div class="d-flex-c">
          <div class="num-text">
            {{ total.datasourceStats }}
          </div>
          <div class="name-text">
            数据源
          </div>
        </div>
      </div>
      <div
        class="left-item full-width d-flex ai-c p-l-tiny c-pointer"
        @click="show('metastatistics')"
      >
        <img
          src="./images/ysj.jpg"
          class="left-img"
        >
        <div class="d-flex-c">
          <div class="num-text">
            {{ total.metastatistics }}
          </div>
          <div class="name-text">
            元数据
          </div>
        </div>
      </div>
      <div
        class="left-item full-width d-flex ai-c p-l-tiny c-pointer"
        @click="show('masterDatastatistics')"
      >
        <img
          src="./images/zsj.jpg"
          class="left-img"
        >
        <div class="d-flex-c">
          <div class="num-text">
            {{ total.masterDatastatistics }}
          </div>
          <div class="name-text">
            主数据
          </div>
        </div>
      </div>
    </div><div class="right-viewer flex-1">
      <DatasourceStats
        :detail="detail"
        v-show="type==='datasourceStats'"
      />
      <MasterDataStatistics
        :detail="detail"
        v-show="type==='masterDatastatistics'"
      />
      <MetaStatistics
        :detail="detail"
        v-show="type==='metastatistics'"
      />
    </div>
  </div>
</template>

<script>
import DatasourceStats from './components/datasource-stats.vue'
import MasterDataStatistics from './components/master-data-statistics.vue'
import MetaStatistics from './components/meta-statistics.vue'
import { mixins } from './utils/commom-chart'
import Emitter from './utils/emitter'
export default {
  name: 'DataSourceChart',
  components: {
    DatasourceStats,
    MasterDataStatistics,
    MetaStatistics
  },
  inheritAttrs: false,
  mixins: [Emitter, mixins],
  props: {
    isPreview: {
      type: Boolean,
      default: false
    },
    isModal: {
      type: Boolean,
      default: false
    },
    isBasicMode: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    relList () {
      this.debouncedCustomResetChart(this.configs)
    },
    isPreview () {
      this.debouncedCustomResetChart(this.configs)
    }
  },
  data () {
    return {
      total: {},
      type: 'datasourceStats',
      detail: {}
    }
  },
  computed: {

  },
  methods: {
    async customResetChart (config) {
      const { total, detail } = this.relList
      this.total = total || {}
      this.detail = detail
    },
    async show (type) {
      this.type = type
    }

  },
  mounted () {
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
.left-view {
  width: 150px;
  gap: 10px;

  .left-item {
    min-height: 60px;
    height: calc((100% - 20px) / 3);
    background: #eaf7ff;
    border-radius: 4px;

    .num-text {
      color: #15a3fa;
      font-size: 18px;
      font-weight: bold;
    }

    .left-img {
      height: 60px;
      width: 60px;
    }
  }
}

</style>
